<template>
    <div>
        <div class="goods">
            <div>
                <img :src="pro.img1" alt="" @click="show = true" />
            </div>
            <h2>{{ pro.proname }}</h2>
            <p>
                <span class="mark">自营</span>
                <span style="color: red"> {{ pro.originprice }}</span>
            </p>
        </div>
        <van-overlay :show="show" @click="show = false" duration="0.5">
            <van-swipe>
                <van-swipe-item v-for="item in banners" :key="item">
                    <img :src="item" alt="" />
                </van-swipe-item>
            </van-swipe>
        </van-overlay>
</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import { getProDetail } from "../../api/pro"
const route = useRoute();
const pro = ref<any>({});
const banners = ref([]);
const getPro = async () => {
    // 字符串
    let id = route.params.id as string;
    let res = await getProDetail(id);
    console.log(res, "详情");
    pro.value = res.data.data;
    banners.value = res.data.data.banners[0].split(",");
};

const show = ref<boolean>(false);
onMounted(() => {
    getPro();
});
</script>
<style lang="scss" scoped>
.goods {
    background: #fff;

    img {
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    h2 {
        margin: 15px 0;
    }

    .mark {
        margin-right: 10px;
        padding: 3px 8px;
        background: red;
        color: #fff;
        font-size: 14px;
    }
}
</style>
